<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body" style="min-height: 500px;">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label label-required">标题</label>
                <div class="layui-input-block">
                    <input name="title" value='{$vo.title|default=""}' required placeholder="请输入名称" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注" class="layui-textarea" name="remark">{$vo.remark|default=""}</textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label label-required">选择采购商品</label>
            <div class="layui-input-block">
                <div id="products" onclick="btn_click()"></div>
            </div>
        </div>
        <blockquote class="layui-elem-quote" style="text-align: center;">商品详细数据</blockquote>
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="150">
            </colgroup>
            <thead>
                <tr>
                    <th class="text-center">商品名称</th>
                    <th class="text-center">规格</th>
                    <th class="text-center">单价</th>
                    <th class="text-center">采购数量</th>
                    <th class="text-center">总价</th>
                </tr>
            </thead>
            <tbody class="content">
                {foreach $vo.content as $key=>$v}
                <tr>
                    <td class='text-center'>{$v.name}</td>
                    <td class='text-center'>{$v.sku}</td>
                    <td class='text-center'>{$v.price}</td>
                    <td class='text-center'>
                        <input type="number" required name="content[count][]" value='{$v.count}' placeholder="请输入要采购的数量"
                        oninput="myFunction(this)" class="layui-input">
                    </td>
                    <td class='text-center sum_price'><span class="color-blue">{$v.sum_price??''}</span></td>
                    <input type="hidden" required name="content[product_id][]" value='{$v.product_id}'>
                    <input type="hidden" required name="content[name][]" value='{$v.name}'>
                    <input type="hidden" required name="content[sku][]" value='{$v.sku}'>
                    <input type="hidden" required name="content[price][]" value='{$v.price}'>
                    <input type="hidden" required name="content[sum_price][]" value='{$v.sum_price??""}'>
                </tr>
                {/foreach}
            </tbody>
        </table>
    </div>
    
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
    {notempty name='Think.get.ware_house_id'}<input type='hidden' value='{$Think.get.ware_house_id}' name='ware_house_id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>
<script>
    
    //加载课件下拉多选组件
    var course_ware = xmSelect.render({
        el: '#products',
        //文字背景颜色
        theme: {
            color: '#1cbbb4',
        },
        //全选清空辅助按钮
        toolbar: { show: true },
        on: function(data){
            //arr:  当前多选已选中的数据
            var arr = data.arr;
            //change, 此次选择变化的数据,数组
            var change = data.change;
            //isAdd, 此次操作是新增还是删除
            var isAdd = data.isAdd;
            
            $('.content').html('');
            $.each(arr, function(index,element){
                console.log(element)
                var html = `
                <tr>
                    <td class='text-center'>${element.name}</td>
                    <td class='text-center'>${element.sku}</td>
                    <td class='text-center'>${element.price}</td>
                    <td class='text-center'>
                        <input type="number" required name="content[count][]" value='${element.count}' placeholder="请输入要采购的数量"
                        oninput="myFunction(this)" class="layui-input">
                    </td>
                    <td class='text-center sum_price'></td>
                    <input type="hidden" required name="content[product_id][]" value='${element.id}'>
                    <input type="hidden" required name="content[name][]" value='${element.name}'>
                    <input type="hidden" required name="content[sku][]" value='${element.sku}'>
                    <input type="hidden" required name="content[price][]" value='${element.price}'>
                    <input type="hidden" required name="content[sum_price][]" value=''>
                </tr>
                `;
                $('.content').append(html);
            })
        },
        //提交的name名
        name: 'product_ids',
        //提示信息
        tips: '请选择要采购的商品',
        //开启搜索
        filterable: true,
        //分页
        paging: true,
        pageSize: 10,
        height: 'auto',
        //自动换行
        autoRow: true,
        //自定义数据匹配key名称
        prop: {
            name: 'name',
            value: 'id',
        },
        data: []
    })
    var select = '{$vo.product_ids??""}';
    
    var select = select.split(',');
    $.get('{:url("get_products")}', {},
        function (res) {
            //渲染默认列表数据
            course_ware.update({
                data: res.data,
                autoRow: true,
            })
            //渲染已经选择的标签
            course_ware.setValue(select);
        }
    );
    function myFunction(that) {
        var count = $(that).val()
        var price = $(that).parent().parent().find('input[name="content[price][]"]').val()
        var sum_price = count * price;
        $(that).parent().parent().find('.sum_price').html('<span class="color-blue">' + sum_price + '</span>')
        $(that).parent().parent().find('input[name="content[sum_price][]"]').val(sum_price)
    }
    window.form.render();
</script>